<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" :height="300" :left="uiLeft" :top="60">
    <div class="box">
      <div class="item1">
        <div>是否编辑：</div>
        <div class="edit">
          <el-switch v-model="editingRef" size="small" />
          <el-button @click.stop="draw"> 重新绘制</el-button>
        </div>
      </div>
      <div class="item1">
        <div class="key">半径:</div>
        <el-input type="number" v-model="radius" placeholder="请输入半径" />
      </div>
      <div class="item1">
        <div class="key">边数:</div>
        <el-input type="number" v-model="sides" placeholder="请输入边数" />
      </div>
      <div class="item1">
        <div class="key">高度:</div>
        <el-input type="number" v-model="extrudedHeight" placeholder="请输入高度" />
      </div>
      <div class="btn1">
        <el-button @click="submit"
          :disabled="!eSGeoExtrudedPolygonUFMSFromCircle || eSGeoExtrudedPolygonUFMSFromCircle.positionEditing || !eSGeoExtrudedPolygonUFMSFromCircle.points || !eSGeoExtrudedPolygonUFMSFromCircle.points.length">创建</el-button>
      </div>
    </div>
  </Dialog>
  
</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import Dialog from "../../components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, computed, watch } from "vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import TooltipCom from "@/components/common/TooltipCom.vue";
import { ESGeoExtrudedPolygonUFMSFromCircle } from "@/scripts/esobjs/ESGeoExtrudedPolygonUFMSFromCircle";
import { getsceneObjNumfromSceneTree } from "@/scripts/utils";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 300);
const sides = ref(10);
const radius = ref(1);
const extrudedHeight = ref(10);

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelserSceneTreeWrapper = objm.modelserSceneTreeWrapper;

const modelserManager = getProjectManager().modelserManager;

const editPolygon = modelserManager.editPolygon;

let eSGeoExtrudedPolygonUFMSFromCircle: any = ref();
let editingRef = ref(false);

watch(editingRef,(val) => {
  if(!eSGeoExtrudedPolygonUFMSFromCircle.value)return;
  eSGeoExtrudedPolygonUFMSFromCircle.value.positionEditing = val
})
watch(eSGeoExtrudedPolygonUFMSFromCircle, (newVal) => {
  if(!eSGeoExtrudedPolygonUFMSFromCircle.value)return;
  eSGeoExtrudedPolygonUFMSFromCircle.value.dispose(eSGeoExtrudedPolygonUFMSFromCircle.value.positionEditingChanged.disposableOn((val:any) => {
    editingRef.value = val
  }))
})

const create = () => {
  eSGeoExtrudedPolygonUFMSFromCircle.value = d.ad(
    objm.createSceneObject(
      ESGeoExtrudedPolygonUFMSFromCircle
    ) as ESGeoExtrudedPolygonUFMSFromCircle
  );
  d.dispose(() => {
    eSGeoExtrudedPolygonUFMSFromCircle.value &&
      objm.destroySceneObject(eSGeoExtrudedPolygonUFMSFromCircle.value);
  });
  editingRef.value = true;
  eSGeoExtrudedPolygonUFMSFromCircle.value.operation = '1' as "1" | "2"
  eSGeoExtrudedPolygonUFMSFromCircle.value.bottom = 0
  eSGeoExtrudedPolygonUFMSFromCircle.value.fillColor = [1, 0, 0, 0.5];
  eSGeoExtrudedPolygonUFMSFromCircle.value.dispose(
    eSGeoExtrudedPolygonUFMSFromCircle.value.pointsChanged.disposableOn((e:any) => {
      // eSGeoExtrudedPolygonUFMSFromCircle.value.height = undefined;
      eSGeoExtrudedPolygonUFMSFromCircle.value.extrudedHeight =
        Number(extrudedHeight.value) +
        editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMSFromCircle.value.points);
      eSGeoExtrudedPolygonUFMSFromCircle.value.perPositionHeight = true;
    })
  );
  updateParam();
};
const updateParam = () => {

  eSGeoExtrudedPolygonUFMSFromCircle.value.ceilling =
    Number(extrudedHeight.value) +
    editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMSFromCircle.value.points);
  // eSGeoExtrudedPolygonUFMSFromCircle.value.height = undefined;
  eSGeoExtrudedPolygonUFMSFromCircle.value.radius = Number(radius.value);
  eSGeoExtrudedPolygonUFMSFromCircle.value.sides = Number(sides.value);
};
// 监听顶面高度模式和变化
watch([radius, sides, extrudedHeight], () => {
  updateParam();
});

// 重新绘制
const draw = () => {
  if (eSGeoExtrudedPolygonUFMSFromCircle.value.positionEditing) {
    eSGeoExtrudedPolygonUFMSFromCircle.value.positionEditing = false;
  }
  eSGeoExtrudedPolygonUFMSFromCircle.value.points = [];
  eSGeoExtrudedPolygonUFMSFromCircle.value.positionEditing = true;
};

// 提交
const submit = async () => {
  const treeItem = objm.createdTreeItem(modelserSceneTreeWrapper);
  treeItem.sceneObject = eSGeoExtrudedPolygonUFMSFromCircle.value;

  const name = "圆形绘制"
  // @ts-ignore
  const num = getsceneObjNumfromSceneTree(treeItem.sceneObject.typeName, objm.modelserSceneTreeWrapper);
  treeItem.name = `${name}(${num})`
  // @ts-ignore
  treeItem.sceneObject.fillColor = [0, 0, 1, 0.5];
  create();
};



onMounted(() => {
  create();
});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 8px;
}


.btn1 {
  display: flex;
  justify-content: flex-end
    /* justify-content: space-between; */
}

.el-button {
  margin-left: 0px !important;
}

.edit {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>